// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../../utils' as f3;
@import '~@mozilla-protocol/core/protocol/css/includes/lib';

.c-passwords {
    @include f3.section-divider;
    background-color: f3.$orange-primary;

    .c-module-tag-title {
        background-color: f3.$orange-light;
    }

    .c-browser {
        @include f3.card-shadow(f3.$orange-dark);
        margin-left: auto;
        margin-right: auto;
        max-width: $screen-sm;
        text-align: center;

        &-bar {
            background-color: f3.$blue-primary;
        }

        &-content {
            @include text-body-md;
            padding-right: $spacing-md;
            padding-left: $spacing-md;
        }
    }

    .c-blurb {
        background-color: f3.$green-light;
        position: relative; /* needed to keep z-index order when browser animates in */
    }

    .mzp-c-button {
        margin-bottom: 0;
    }
}

.c-passwords-example {
    @include f3.mono-font;

    .c-title-uppercase,
    .t-password {
        margin-bottom: $spacing-lg;
    }

    &-input {
        @include f3.border;
        max-width: $content-xs;
        margin-left: auto;
        margin-right: auto;
        overflow-wrap: break-word;
        padding: $spacing-sm;
        text-align: left;

        &::before {
            content: '';
            display: inline-block;
            margin-right: $spacing-sm;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            background-size: contain;
            background-repeat: no-repeat;
        }

        &.t-username::before {
            background-image: url('/media/img/firefox/family/icon-person.svg');
        }

        &.t-password::before {
            background-image: url('/media/img/firefox/family/icon-lock.svg');
        }

        &[data-password-length='long'] {
            display: none;
        }
    }

    &-submit {
        text-transform: uppercase;
        cursor: not-allowed;
    }
}

// handle extra small screens
@media (max-width: #{$content-sm}) {
    .c-passwords {
        .c-subtitle {
            max-width: 9ch;
        }

        &-example-input {
            &::before {
                width: 16px;
                height: 16px;
            }
        }
    }
}

@media #{$mq-md} {
    .c-passwords {
        .c-blurb {
            width: 50%;
            min-width: 30ch;
            margin-left: auto;
            margin-top: -#{$layout-sm};
        }

        .c-browser {
            margin-left: unset;
            margin-right: unset;

            &-content {
                padding-top: $layout-lg;
                padding-bottom: $layout-lg;
            }
        }

        &-example-input {
            max-width: 350px;

            &[data-password-length='short'] {
                display: none;
            }

            &[data-password-length='long'] {
                display: block;
            }
        }
    }
}

@supports (display: grid) {
    @media #{$mq-lg} {
        .c-passwords {
            .c-blurb {
                margin-top: 0;
                max-width: 40ch;
                width: 70%;
            }

            .l-grid {
                display: grid;
                grid-template-columns: [column-one] minmax(30ch, 42%) [column-two] 1fr [end];
                grid-template-rows: auto auto [overlap-start] $layout-sm [overlap-end] auto;
                column-gap: $layout-lg;

                .c-module-tag {
                    place-self: start;
                }

                .c-content {
                    align-self: center;
                    grid-column-start: column-one;
                    grid-row: 2 / -1;
                }

                .c-browser,
                .c-blurb {
                    grid-column-start: column-two;
                }

                .c-browser {
                    grid-row: 1 / overlap-end;
                    align-self: end;
                }

                .c-blurb {
                    grid-row: overlap-start / -1;
                    align-self: start;
                }
            }
        }
    }
}
